<template>

  <!--  卡片区域  -->
  <n-card>
    <!--    工具栏    -->
    <n-space justify="end" style="padding-bottom: 15px;">
      <!--  新建按钮    -->
<!--      <n-button @click="showModal = true" type="info" style="width: 80px; height: 30px">
        <n-icon size="18">
          <add/>
        </n-icon>
        新建
      </n-button>-->
      <!--刷新-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-button text style="font-size: 20px; width:22px; height:32px;" @click="refresh">
            <n-icon>
              <refresh-sharp />
            </n-icon>
          </n-button>
        </template>
        <span>刷新</span>
      </n-tooltip>
      <!--密度-->
      <n-popselect v-model:value="densityValue" :options="densityOptions" trigger="click">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button text style="font-size: 20px; width:22px; height:32px; margin-left: 11px">
              <n-icon>
                <auto-fit-height20-regular />
              </n-icon>
            </n-button>
          </template>
          <span>密度</span>
        </n-tooltip>
      </n-popselect>
      <!--列设置-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-popover trigger="click" placement="bottom-end">
            <template #trigger>
              <n-button text style="font-size: 20px; width:22px; height:32px; margin-bottom: 2px; margin-left: 11px">
                <n-icon>
                  <Settings20Regular />
                </n-icon>
              </n-button>
            </template>
            <template #header>
              <n-checkbox label="列展示" v-model:checked="allChecked" @update:checked="allChange" />
            </template>
            <n-space vertical>
              <n-checkbox v-for="item in checkboxList" :key="item.name" :label="item.name" v-model:checked="item.checked" @update:checked="itemChange" />
            </n-space>
          </n-popover>
        </template>
        <span>列设置</span>
      </n-tooltip>
    </n-space>
    <!--    数据表格    -->
    <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
        :size="densityValue"
        :loading="loading"
        :scroll-x="1800"

    />
  </n-card>


  <!--  新建模态框  -->
  <n-modal v-model:show="showModal" preset="card" :style="bodyStyle" title="编辑" :segmented="segmented">
    <!--表单-->
    <n-form :rules="rules" :model="formValue">
      <n-form-item path="user.name" label="岗位">
        <n-select
            clearable
            v-model:value="formValue"
            :options="form_id"
            placeholder="请输入用户名"
        />
      </n-form-item>

      <n-form-item label="分行所属">
        <n-select
            v-model:value="companyValue"
            :options="company_id"
            placeholder="请选择分行所属"
            clearable
        />
      </n-form-item>

      <n-form-item label="工作类型">
        <n-select
            v-model:value="WorkValue"
            :options="Work_id"
            placeholder="请输入工作经验"
            clearable
        />
      </n-form-item>
      <n-form-item label="最低学历" style="width: 35%">
        <n-select
            v-model:value="zuiValue"
            :options="zui_status"
            placeholder="请输入最低学历"
            clearable
        />
      </n-form-item>
      <n-form-item label="经验要求" style="width: 35%">
        <n-select
            v-model:value="jingValue"
            :options="jing_status"
            placeholder="请输入经验要求"
            clearable
        />
      </n-form-item>
      <n-form-item label="薪资范围" style="width: 35%; ">
        <n-select
            v-model:value="xinValue"
            :options="xin_status"
            placeholder="请输入薪资范围"
            clearable
        />
      </n-form-item>
      <n-form-item label="开展档期" style="width: 35%; ">
        <n-select
            v-model:value="kaiValue"
            :options="kai_status"
            placeholder="请输入开展档期"
            clearable
        />
      </n-form-item>
      <n-form-item label="适用年龄" style="width: 35%; ">
        <n-select
            v-model:value="NianValue"
            :options="Nian_status"
            placeholder="请输入适用年龄"
            clearable
        />
      </n-form-item>
      <n-form-item label="推荐值(0未推荐)" style="width: 35%; ">
        <n-input-number
            v-model:value="widthValue"
            placeholder="请输入推荐值"
            clearable
        />
      </n-form-item>
      <n-form-item label="账号状态" style="width: 35%; ">
        <n-select
            v-model:value="enableValue"
            :options="enable_status"
            placeholder="请选择账号状态"
            clearable
        />
      </n-form-item>
      <n-form-item label="技能要求" >
        <n-input
            v-model:value="jiValue"
            type="textarea"
            placeholder="请输入推荐值"
            clearable
        />
      </n-form-item>
      <n-form-item label="联系人微信二维码">
        <n-upload list-type="image-card" action="https://recruit.aicase.xyz/storage/images/boss_avatar">
          <n-space vertical>
            <n-icon size="18">
              <add/>
            </n-icon>
            上传图片
          </n-space>
        </n-upload>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancel">取消</n-button>
        <n-button type="info" @click="sure">确定</n-button>
      </n-space>
    </template>
  </n-modal>



  <!--  编辑模态框-->
  <n-modal v-model:show="showEditModal" preset="card" :style="bodyStyle" title="编辑" :segmented="segmented">
    <n-form :rules="rulesEdit" :model="formEditValue">
      <n-form-item  label="岗位">
        <n-select
            clearable
            v-model:value="formEditValue"
            :options="form_id"
            placeholder="请输入岗位"
        />
      </n-form-item>
      <n-form-item label="分行所属">
        <n-select
            v-model:value="companyEditValue"
            :options="company_id"
            placeholder="请选择分行所属"
            clearable
        />
      </n-form-item>
      <n-form-item label="工作类型" style="width: 45%;float: right ">
        <n-select
            v-model:value="WorkEditValue"
            :options="Work_id"
            placeholder="请输入工作类型"
            clearable
        />
      </n-form-item>
      <n-form-item label="最低学历" style="width: 45%; ">
        <n-select
            v-model:value="zuiEditValue"
            :options="zui_status"
            placeholder="请输入最低学历"
            clearable
        />
      </n-form-item>

      <n-form-item label="经验要求" style="width: 45%;float: right ">
        <n-select
            v-model:value="jingEditValue"
            :options="jing_status"
            placeholder="请输入经验要求"
            clearable
        />
      </n-form-item>
      <n-form-item label="薪资范围" style="width: 45%; ">
        <n-select
            v-model:value="xinEditValue"
            :options="xin_status"
            placeholder="请输入薪资范围"
            clearable
        />
      </n-form-item>
      <n-form-item label="开展档期" style="width: 45%;float: right ">
        <n-select
            v-model:value="kaiValue"
            :options="kai_status"
            placeholder="请输入开展档期"
            clearable
        />
      </n-form-item>
      <n-form-item label="适用年龄" style="width: 45%; ">
        <n-select
            v-model:value="NianValue"
            :options="Nian_status"
            placeholder="请输入适用年龄"
            clearable
        />
      </n-form-item>
      <n-form-item label="推荐值(0未推荐)" style="width: 45%;float: right ">
        <n-input-number
            v-model:value="widthEditValue"
            placeholder="请输入推荐值"
            clearable
        />
      </n-form-item>
      <n-form-item label="账号状态" style="width: 45%; ">
        <n-select
            v-model:value="enableEditValue"
            :options="enable_status"
            placeholder="请选择账号状态"
            clearable
        />
      </n-form-item>
      <n-form-item label="技能要求" >
        <n-input
            v-model:value="jiEditValue"
            type="textarea"
            placeholder="请输入推荐值"
            clearable
        />
      </n-form-item>
      <n-form-item label="联系人微信二维码">
        <n-upload list-type="image-card" action="https://recruit.aicase.xyz/storage/images/boss_avatar">
          <n-space vertical>
            <n-icon size="18">
              <add/>
            </n-icon>
            上传图片
          </n-space>
        </n-upload>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancelEdit">取消</n-button>
        <n-button type="info" @click="sureEdit">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script>
import {defineComponent, h, reactive, ref ,onMounted} from 'vue'
import {NButton, NForm, NFormItem, NInput, NTag, NFlex, NIcon, NDropdown, NText} from "naive-ui";
import { Add } from "@vicons/ionicons5"
import { RefreshSharp } from "@vicons/material"
import { AutoFitHeight20Regular ,Settings20Regular} from "@vicons/fluent"
import { LeftOutlined , RightOutlined} from "@vicons/antd"
import {ListJob,StoreJob,UpdateJob,BossListJob,ChangeJob,TemplateJob,ImportJob,ErrorJob} from '@/api/job'

export default defineComponent({
  components: {
    Add,
    RefreshSharp,
    AutoFitHeight20Regular,
    Settings20Regular,
    LeftOutlined,
    RightOutlined
  },
  setup(){
    const message = window.$message
    /*  数据表格  */
    // 创建表格列模版
    const createColumns = () => {
      return [
        {
          title: "序号",
          width:100,
          key: "index",
          render(row, index) {
            return index + 1;
          }
        },
        {
          title: "名称",
          width: 150,
          key: "name",
          render(row) {
            switch (row.name) {
              case "1MTC7BG1":
                return h(
                    NText,
                    {},
                    { default: () => "银行大堂经理" }
                )
              case "4QQDEHMC":
                return h(
                    NText,
                    {},
                    { default: () => "理财顾问" }
                )
              case "1218IR6L":
                return h(
                    NText,
                    {},
                    { default: () => "保险理赔" }
                )
              case "AHHV3K4N":
                return h(
                    NText,
                    {},
                    { default: () => "合规稽查" }
                )
              case "MBDPLSL5":
                return h(
                    NText,
                    {},
                    { default: () => "保险" }
                )
              case "J055OA6T":
                return h(
                    NText,
                    {},
                    { default: () => "客户经理" }
                )
            }
          }

        },
        {
          title: "分行",
          width:150,
          key: "fen",
          render(row) {
            switch (row.fen) {
              case "6H60MRFF":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行信用卡中心"}
                )
              case "976G1Q9A":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行天津分行"}
                )
              case "BLCDJ1QG":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行重庆分行"}
                )
              case "DTBAFH88":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行陕西分行"}
                )
              case "FDII2D5I":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行福建分行"}
                )
              case "FDK26OTS":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行北京分行"}
                )
              case "IJBE1P93":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行上海分行"}
                )
              case "K6LR9BR6":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行湖南分行"}
                )
              case "P4KNVEU3":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行石家庄分行"}
                )
              case "QKH0CED8":
                return h(
                    NText,
                    {},
                    {default: () => "中信银行广州分行"}
                )
            }
          }

        },
        {
          title: "招聘者",
          width:100,
          key: "zhao",
        },
        {
          title: "工作类型",
          width:100,
          key: "work",
          render(row) {
            switch (row.work) {
              case 1:
                return h(
                    NText,
                    {},
                    { default: () => "全职" }
                )
              case 0:
                return h(
                    NText,
                    {},
                    { default: () => "兼职" }
                )
            }
          }
        },
        {
          title: "最低学历",
          width: 100,
          key: "zui",
          render(row) {
            switch (row.zui) {
              case 0:
                return h(
                    NText,
                    {},
                    {default: () => "高中以下"}
                )
              case 1:
                return h(
                    NText,
                    {},
                    {default: () => "高中"}
                )
              case 2:
                return h(
                    NText,
                    {},
                    {default: () => "中专/技校"}
                )
              case 3:
                return h(
                    NText,
                    {},
                    {default: () => "大专"}
                )
              case 4:
                return h(
                    NText,
                    {},
                    {default: () => "本科"}
                )
              case 5:
                return h(
                    NText,
                    {},
                    {default: () => "硕士"}
                )
              case 6:
                return h(
                    NText,
                    {},
                    {default: () => "博士"}
                )
            }
          }
        },
        {
          title: "经验要求",
          width: 100,
          key: "jing",
          render(row) {
            switch (row.jing) {
              case 0:
                return h(
                    NText,
                    {},
                    {default: () => "不限"}
                )
              case 1:
                return h(
                    NText,
                    {},
                    {default: () => "1年以内"}
                )
              case 2:
                return h(
                    NText,
                    {},
                    {default: () => "1-3年"}
                )
              case 3:
                return h(
                    NText,
                    {},
                    {default: () => "3-5年"}
                )
              case 4:
                return h(
                    NText,
                    {},
                    {default: () => "5-10年"}
                )
              case 5:
                return h(
                    NText,
                    {},
                    {default: () => "10年以上"}
                )
            }
          }
        },
        {
          title: "薪资范围",
          width:100,
          key: "xing",
          ellipsis: true,
          render(row) {
            switch (row.xing) {
              case 0:
                return h(
                    NText,
                    {},
                    {default: () => "面试"}
                )
              case 1:
                return h(
                    NText,
                    {},
                    {default: () => "1-3k"}
                )
              case 2:
                return h(
                    NText,
                    {},
                    {default: () => "3-5k"}
                )
              case 3:
                return h(
                    NText,
                    {},
                    {default: () => "5-8k"}
                )
              case 4:
                return h(
                    NText,
                    {},
                    {default: () => "8-12k"}
                )
              case 5:
                return h(
                    NText,
                    {},
                    {default: () => "12-15k"}
                )
              case 6:
                return h(
                    NText,
                    {},
                    {default: () => "15-20k"}
                )
              case 7:
                return h(
                    NText,
                    {},
                    {default: () => "20k以上"}
                )
            }
          }
        },
        {
          title: "技能要求",
          width:100,
          key: "ji",
          ellipsis: true,
        },
        {
          title: "职位状态",
          width:100,
          key: "status",
          render(row) {
            switch (row.status) {
              case 1:
                return h(
                    NTag,
                    {
                      strong: true,
                      size: "small",
                      type: "success",
                    },
                    { default: () => "审核通过" }
                )
              case 0:
                return h(
                    NTag,
                    {
                      strong: true,
                      size: "small",
                      type: "error",
                    },
                    { default: () => "未审核" }
                )
            }
          }
        },
        {
          title: "推荐值",
          width:100,
          key: "disc",
        },
        {
          title: "编辑时间",
          width:150,
          key: "time",
        },
        {
          title: "操作",
          width:100,
          key: "actions",
          fixed:'right',
          render(row) {
            return h(
                NFlex,
                {
                  size: "small",
                },
                {
                  default: () => [
                    h(
                        NButton,
                        {
                          text: true,
                          color: "#3FA2FE",
                          onClick: () => {
                            console.log(row)
                            showEditModal.value = true
                            formEditValue.value = row.name
                            companyEditValue.value = row.fen
                            enableEditValue.value = row.status
                            WorkEditValue.value = row.work
                            zuiEditValue.value = row.zui
                            jingEditValue.value = row.jing
                            xinEditValue.value = row.xing
                            kaiEditValue.value = row.level
                            NianEditValue.value = row.salary
                            widthEditValue.value = row.disc
                            jiEditValue.value = row.ji
                            // bossEditValue.value = row.
                            // console.log(formEditValue)
                          }
                        },
                        { default: () => "编辑" }
                    ),
                    h(
                        NButton,
                        {
                          text: true,
                          color: "#3FA2FE",
                        },
                        { default: () =>
                              h(
                                  NDropdown,
                                  {
                                    trigger:"hover",
                                    options: [
                                      {
                                        label: '通过',
                                        key: '1',
                                      },
                                      {
                                        label: '拒绝',
                                        key: "0"
                                      },
                                    ],
                                    onClick: (key) =>{


                                    }
                                  },
                                  { default: ()=> "审核"}
                          ) }
                    )
                  ]
                }
            )
          }
        }
      ];
    };
    // 调用列模版
    const columns = createColumns()
    // 表格数据
    let data = reactive([])


    // 获取用户列表数据
    let getData = ()=>{
      ListJob().then(res => {
        const content = res.data.list
        console.log(content)
        // 转换数据库时间格式为标准时间格式方法
        let getDate = (time)=> {
          const dateTime = new Date(time)
          const year = dateTime.getFullYear()
          let month = (dateTime.getMonth() + 1)
          month =  month >= 10 ? month: `0${month}`
          let date = dateTime.getDate()
          date = date >= 10? date : `0${date}`
          let hour = dateTime.getHours()
          hour = hour >= 10? hour : `0${hour}`
          let minute = dateTime.getMinutes()
          minute = minute >= 10? minute : `0${minute}`
          let second = dateTime.getSeconds()
          second = second >= 10? second : `0${second}`
          return `${year}-${month}-${date} ${hour}:${minute}:${second}`
        }

        // 遍历数据库数据
        content.forEach((item, index) => {
          data.push({
            key:index,
            name:item.post_id,
            fen:item.company_id,
            zhao:item?.owner?.username ?? '未分配',
            work:item.job_type,
            zui:item.min_education,
            jing:item.exp_require,
            xing:item.salary,
            ji:item.skill,
            status:item.enable_status,
            disc:item.weight,
            time:getDate(item.updated_at),
            boss:item.owner_id
          })
        })
        total.value = data.length
      })
    }
    // 调用数据
    getData()
    // 总条数
    const total = ref(data.length);
    // 总页数
    const page = ref(Math.ceil(data.length / 10));
    // 当前所在页数
    const currentPage = ref(1);
    // 分页
    const pagination = {
      prev:()=>{
        return h(
            NIcon,
            {
              onClick:()=>{
                currentPage.value --
              }
            },
            {
              default: () => h(LeftOutlined)
            }
        )
      },
      next:()=>{
        return h(
            NIcon,
            {
              onClick:()=>{
                currentPage.value ++
              }
            },
            {
              default: () => h(RightOutlined)
            }
        )
      },
      prefix:()=>{
        const range = [currentPage.value * 10 - 9, currentPage.value * 10];
        if (currentPage.value <= 1) {
          return `第 1 条到第 ${range[1]} 条 / 总共 ${total.value} 条`;
        }else if (currentPage.value >= page.value) {
          return `第 ${range[0]} 条到第 ${total.value} 条 / 总共 ${total.value} 条`;
        }else if (currentPage.value > 1 && currentPage.value < page.value) {
          return `第 ${range[0]} 条到第 ${range[1]} 条 / 总共 ${total.value} 条`;
        }
      },
    }




    /*  工具栏  */
    // 模态框
    /*新建、编辑*/
    // 显示新建-模态框
    const showModal = ref(false)
    // 显示编辑-模态框
    const showEditModal = ref(false)
    // 模态框样式
    const bodyStyle = {
      width: "640px",
    }
    const segmented = {
      content: "soft",
      footer: "soft"
    }
    // 取消新建-模态框
    function cancel() {
      showModal.value = false
    }
    // 取消编辑-模态框
    function cancelEdit() {
      showEditModal.value = false
    }
    // 新建-确定提交
    function sure() {
      let formData = {
        post_id: formValue.value,
        enable_status: enableValue.value,
        company_id:companyValue.value,
        job_type:WorkValue.value,
        min_education:zuiValue.value,
        exp_require:jingValue.value,
        salary:xinValue.value,
        kai:kaiValue.value,
        nian:NianValue.value,
        weight:widthValue.value,
        skill:jiValue.value,
        owner_id: bossValue.value
      }

      // 添加到数据库
      UpdateJob(formData).then(res => {
        console.log(res)
        if (res.code === 0) {
          message.success(res.message)
          // 刷新数据
          window.location.reload()
          cancel()
          window.location.reload()
        } else {
          message.error(res.message)
        }
      })

    }
    // 编辑-id
    let editId = ref()
    let editAvatar = ref()
    // 编辑-确定提交
    function sureEdit() {
      let formData = {
        post_id: formEditValue.value,
        enable_status: enableEditValue.value,
        company_id:companyEditValue.value,
        id: editId.value,
        job_type:WorkEditValue.value,
        min_education:zuiEditValue.value,
        exp_require:jingEditValue.value,
        salary:xinEditValue.value,
        kai:kaiEditValue.value,
        nian:NianEditValue.value,
        weight:widthEditValue.value,
        skill:jiEditValue.value,
        owner_id:bossEditValue.value,
      }
      console.log(formData)
      // 添加到数据库
      StoreJob(formData).then(res => {
        console.log(res)
        if (res.code === 0) {
          message.success(res.message)
          // window.location.reload()
        }else {
          message.error(res.message)
        }
      })
      showEditModal.value = false
    }
    // 新建-表单信息
    const formValue = ref()
    // 编辑-表单信息
    const formEditValue = ref()
    // 岗位id
    const form_id = ref([
        {label: "银行大堂经理", value: '"1MTC7BG1"'},
        {label: "理财顾问", value: '"4QQDEHMC"'},
        {label: "保险理赔", value: "1218IR6L"},
        {label: "合规稽查", value: '"AHHV3K4N"'},
        {label: "保险", value: '"MBDPLSL5"'},
        {label: "客户经理", value: '"J055OA6T"'},
    ])
    // 新建-所属分行
    const companyValue = ref()
    // 编辑-所属分行
    const companyEditValue = ref()
    // 所属分行列表
    const company_id = ref([
      {label: "中信银行信用卡中心", value: '6H60MRFF'},
      {label: "中信银行天津分行", value: '976G1Q9A'},
      {label: "中信银行重庆分行", value: "BLCDJ1QG"},
      {label: "中信银行陕西分行", value: 'DTBAFH88'},
      {label: "中信银行福建分行", value: 'FDII2D5I'},
      {label: "中信银行北京分行", value: 'FDK26OTS'},
      {label: "中信银行上海分行", value: 'IJBE1P93'},
      {label: "中信银行湖南分行", value: "K6LR9BR6"},
      {label: "中信银行石家庄分行", value: "P4KNVEU3"},
      {label: "中信银行广州分行", value: "QKH0CED8"},
    ])
    // 新建-角色身份
    const roleValue = ref()
    // 编辑-角色身份
    const roleEditValue = ref()
    // 账号角色身份列表
    const role_id = ref([
      {label: "招聘者", value: 1},
      {label: "分行管理员", value: 2},
      {label: "总行管理员", value: 3},
    ])
    // 新建-工作类型
    const WorkValue = ref()
    // 编辑-工作类型
    const WorkEditValue = ref()
    // 账号角色身份列表
    const Work_id = ref([
      {label: "全职", value: 0},
      {label: "兼职", value: 1},
    ])
    // 新建-账号状态
    const enableValue = ref()
    // 编辑-账号状态
    const enableEditValue = ref()
    // 账号状态列表
    const enable_status = ref([
      {label: "启用", value: 1},
      {label: "禁用", value: 0},
    ])
    // 新建-最低学历
    const zuiValue = ref()
    // 编辑-学历
    const zuiEditValue = ref()
    // 学历
    const zui_status = ref([
      {label: "高中以下", value: 0},
      {label: "高中", value: 1},
      {label: "中专/技校", value: 2},
      {label: "大专", value: 3},
      {label: "本科", value: 4},
      {label: "硕士", value: 5},
      {label: "博士", value: 6},
    ])

// 新建- 经验
    const jingValue = ref()
    // 编辑-经验
    const jingEditValue = ref()
    // 经验
    const jing_status = ref([
      {label: "不限", value: 0},
      {label: "1年以内", value: 1},
      {label: "1-3年", value: 2},
      {label: "3-5年", value: 3},
      {label: "5-10年", value: 4},
      {label: "10年以上", value: 5},
    ])

    // 新建- 薪资
    const xinValue = ref()
    // 编辑-薪资
    const xinEditValue = ref()
    // 薪资
    const xin_status = ref([
      {label: "面试", value: 0},
      {label: "1-3k", value: 1},
      {label: "3-5k", value: 2},
      {label: "5-8k", value: 3},
      {label: "8-12k", value: 4},
      {label: "12-15k", value: 5},
      {label: "15-20k", value: 6},
      {label: "20k以上", value: 7},

    ])

    // 新建- 开展档期
    const kaiValue = ref()
    // 编辑-开展
    const kaiEditValue = ref()
    // 开展
    const kai_status = ref([
      {label: "周末", value: 0},
      {label: "寒假", value: 1},
      {label: "暑假", value: 2},

    ])

    // 新建- 适用年龄
    const NianValue = ref(0)
    // 编辑-年龄
    const NianEditValue = ref()
    // 年龄
    const Nian_status = ref([
      {label: "18岁-28岁", value: 0},
      {label: "28岁-38岁", value: 1},
      {label: "38岁以上", value: 2},

    ])

    // 新建值
    const widthValue = ref()
    //编辑推荐值
    const widthEditValue = ref()

    // 新建技能
    const jiValue = ref()
    //编辑技能
    const jiEditValue = ref()

    // 新建boss id
    const bossValue = ref()
    //编辑boss id
    const bossEditValue = ref()

    // 新建验证规则
    const rules = {
      user: {
        name: {
          required: true,
          trigger: "blur",
          message: "请输入用户名！"
        },
        mobile: {
          required: true,
          trigger: "blur",
          message: "请输入手机号！"
        },
        password: {
          required: true,
          trigger: "blur",
          message: "请输入密码！"
        },
      }
    };
    // 编辑验证规则
    const rulesEdit = {
      user: {
        name: {
          required: true,
          trigger: "blur",
          message: "请输入用户名！"
        },
        mobile: {
          required: true,
          trigger: "blur",
          message: "请输入手机号！"
        },
      }
    };
    /*刷新*/
    // 加载
    const loading = ref(false)
    // 刷新
    function refresh() {
      // loading.value = true
      // setTimeout(() => {
      //   // getData()
      //   loading.value = false
      // }, 1000)
      window.location.reload()
    }
    /*密度*/
    // 密度事件数据
    const densityOptions = [
      {
        label: "默认",
        value: "large"
      },
      {
        label: "中等",
        value: "medium"
      },
      {
        label: "紧密",
        value: "small",
      },
    ]
    // 默认密度
    const densityValue = ref('medium')
    /*列设置*/
    // 复选框全选
    const allChecked = ref(true)
    // 复选框列表
    const checkboxList = ref([])
    // 列表添加数据
    for (let i = 0;i < columns.length; i++){
      checkboxList.value.push({name: columns[i].title, checked: true})
    }
    // 全选改变事件
    const allChange = ()=>{
      if (allChecked.value) {
        checkboxList.value.forEach(item => {item.checked = true})
      } else {
        checkboxList.value.forEach(item => {item.checked = false})
      }
    }
    // 复选框单个改变事件
    const itemChange = ()=>{
      if (checkboxList.value.every(item => item.checked)) {
        allChecked.value = true
      } else {
        allChecked.value = false
      }
    }



    return {
      // 模态框
      form_id,
      bossValue,
      bossEditValue,
      jiValue,
      jiEditValue,
      widthValue,
      widthEditValue,
      NianValue,
      NianEditValue,
      Nian_status,
      kaiValue,
      kaiEditValue,
      kai_status,
      xinValue,
      xinEditValue,
      xin_status,
      jingValue,
      jingEditValue,
      jing_status,
      zuiValue,
      zuiEditValue,
      zui_status,
      showModal,
      showEditModal,
      bodyStyle,
      segmented,
      cancel,
      cancelEdit,
      sure,
      sureEdit,
      formValue,
      formEditValue,
      rules,
      rulesEdit,
      roleValue,
      roleEditValue,
      role_id,
      enableValue,
      enableEditValue,
      enable_status,
      companyValue,
      companyEditValue,
      company_id,
      // 数据表格
      densityOptions,
      densityValue,
      data,
      columns,
      pagination,
      loading,
      refresh,
      page,
      checkboxList,
      allChecked,
      allChange,
      itemChange,
      editId,
      editAvatar,
      WorkValue,
      Work_id,
      WorkEditValue
    }
  }

})
</script>

<style scoped>

</style>